<meta charset="UTF-8">

<div id="accessplatformlist" style="padding: 10px;">
    <div class="full">
        <h3 class="h3-title">接入平台列表</h3>
        <div style="height: 42px;padding-top: 3px;">
            <div style="padding-right: 10px;width:200px" class="fl">
                <i-input v-model.trim="queryParameter" icon="ios-close-circle-outline" @on-click="cleanValue"></i-input>
            </div>
            <div style="padding-right: 10px;" class="fl">
                <i-button type="info" @click="queryForwardParams">{{$t("reportForm.query")}}</i-button>
            </div>
            <div style="padding-right: 10px;" class="fl">
                <i-button type="primary" @click="handleAdd">{{$t("user.add")}}</i-button>
            </div>
        </div>
        <div>
            <i-table :columns="columnsList" :data="tableData" :height="taleHeight" :loading="loading"></i-table>
        </div>
        <Drawer :title="drawerTitle" width="800" v-model="drawerModal">
            <div v-if="inputtype == 3">
                <Row style="height: 35px;line-height: 35px;">
                    <i-col :span="4" style="text-align: right;">
                        <span style="color: red;">*</span>&nbsp;平台名称&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="servername"></i-input>
                    </i-col>
                    <i-col :span="4" style="text-align: right;">
                        <span style="color: red;">*</span>&nbsp;下级平台接入码&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="gnsscenterid"></i-input>
                    </i-col>
                </Row>
                <Row style="height: 35px;line-height: 35px;">
                    <i-col :span="4" style="text-align: right;">
                        <span style="color: red;">*</span>&nbsp;协议类型&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-select v-model="protocoltype">
                            <i-option :value="item.index" :key="item.index" v-for="item in protocols">{{item.name}}</i-option>
                        </i-select>
                    </i-col>
                    <i-col :span="4" style="text-align: right;">
                        <span style="color: red;">*</span>&nbsp;协议版本号&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="uplinkversion"></i-input>
                    </i-col>
                </Row>
                <Row style="height: 35px;line-height: 35px;">
                    <i-col :span="4" style="text-align: right;">
                        <span style="color: red;">*</span>&nbsp;用户名&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="userid"></i-input>
                    </i-col>
                    <i-col :span="4" style="text-align: right;">
                        <span style="color: red;">*</span>&nbsp;密码&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="password"></i-input>
                    </i-col>
                </Row>
                <Row style="height: 35px;line-height: 35px;">
                    <i-col :span="4" style="text-align: right;">
                        <span style="color: red;">*</span>&nbsp;主链路ip&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="uplinkip"></i-input>
                    </i-col>
                    <i-col :span="4" style="text-align: right;">
                        <span style="color: red;">*</span>&nbsp;主链路端口&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="uplinkport"></i-input>
                    </i-col>
                </Row>
                <Row style="height: 35px;line-height: 35px;">
                    <i-col :span="4" style="text-align: right;">
                        &nbsp;是否加密&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <Checkbox :value="encryptflag==1" @on-change="onChangeEncryptFlag"></Checkbox>
                    </i-col>
                    <i-col :span="4" style="text-align: right;">
                        <span style="color: red;" v-show="encryptflag==1">*</span>&nbsp;密匙M1&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="m1"></i-input>
                    </i-col>
                </Row>
                <Row style="height: 35px;line-height: 35px;">
                    <i-col :span="4" style="text-align: right;">
                        <span style="color: red;" v-show="encryptflag==1">*</span>&nbsp;密匙IA1&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="ia1"></i-input>
                    </i-col>
                    <i-col :span="4" style="text-align: right;">
                        <span style="color: red;" v-show="encryptflag==1">*</span>&nbsp;密匙IC1&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="ic1"></i-input>
                    </i-col>
                </Row>
                <Row style="height: 35px;line-height: 35px;">
                    <i-col :span="4" style="text-align: right;">
                        视频key&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="videokey"></i-input>
                    </i-col>
                    <i-col :span="4" style="text-align: right;">
                        实时视频URL&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="realtimevideourl"></i-input>
                    </i-col>
                </Row>
                <Row style="height: 35px;line-height: 35px;">
                    <i-col :span="4" style="text-align: right;">
                        视频回放URL&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="historyvideourl"></i-input>
                    </i-col>
                    <i-col :span="4" style="text-align: right;">
                        从链ip&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="downlinkip"></i-input>
                    </i-col>
                </Row>
                <Row style="height: 35px;line-height: 35px;">
                    <i-col :span="4" style="text-align: right;">
                        从链端口&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="downlinkport"></i-input>
                    </i-col>
                    <i-col :span="4" style="text-align: right;">
                        备注&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="remark"></i-input>
                    </i-col>
                </Row>
            </div>
            <div v-else-if="inputtype == 1">
                <Row style="height: 35px;line-height: 35px;">
                    <i-col :span="4" style="text-align: right;">
                        <span style="color: red;">*</span>&nbsp;平台名称&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="servername"></i-input>
                    </i-col>
                    <i-col :span="4" style="text-align: right;">
                        <span style="color: red;">*</span>&nbsp;协议类型&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-select v-model="protocoltype">
                            <i-option :value="item.index" :key="item.index" v-for="item in protocols">{{item.name}}</i-option>
                        </i-select>
                    </i-col>
                </Row>
                <Row style="height: 35px;line-height: 35px;">
                    <i-col :span="4" style="text-align: right;">
                        <span style="color: red;">*</span>&nbsp;转发地址&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="uplinkip" placeholder="ip"></i-input>
                    </i-col>
                    <i-col :span="4" style="text-align: right;">
                        <span style="color: red;">*</span>&nbsp;转发端口&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="uplinkport" placeholder="port"></i-input>
                    </i-col>
                </Row>

                <Row style="height: 35px;line-height: 35px;">
                    <i-col :span="4" style="text-align: right;">
                        &nbsp;用户名&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="userid"></i-input>
                    </i-col>
                    <i-col :span="4" style="text-align: right;">
                        &nbsp;密码&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="password"></i-input>
                    </i-col>
                </Row>
                <Row style="height: 35px;line-height: 35px;">
                    <i-col :span="4" style="text-align: right;">
                        备注&nbsp;
                    </i-col>
                    <i-col :span="20">
                        <i-input v-model.trim="remark"></i-input>
                    </i-col>
                </Row>
            </div>
            <div v-else>
                <Row style="height: 35px;line-height: 35px;">
                    <i-col :span="4" style="text-align: right;">
                        <span style="color: red;">*</span>&nbsp;平台名称&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="servername"></i-input>
                    </i-col>
                    <i-col :span="4" style="text-align: right;">
                        <span style="color: red;">*</span>&nbsp;协议类型&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-select v-model="protocoltype">
                            <i-option :value="item.index" :key="item.index" v-for="item in protocols">{{item.name}}</i-option>
                        </i-select>
                    </i-col>
                </Row>
                <Row style="height: 35px;line-height: 35px;">
                    <i-col :span="4" style="text-align: right;">
                        <span style="color: red;">*</span>&nbsp;转发地址&nbsp;
                    </i-col>
                    <i-col :span="20">
                        <i-input v-model.trim="uplinkip" placeholder="ip:port"></i-input>
                    </i-col>
                </Row>

                <Row style="height: 35px;line-height: 35px;">
                    <i-col :span="4" style="text-align: right;">
                        &nbsp;用户名&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="userid"></i-input>
                    </i-col>
                    <i-col :span="4" style="text-align: right;">
                        &nbsp;密码&nbsp;
                    </i-col>
                    <i-col :span="8">
                        <i-input v-model.trim="password"></i-input>
                    </i-col>
                </Row>
                <Row style="height: 35px;line-height: 35px;">
                    <i-col :span="4" style="text-align: right;">
                        备注&nbsp;
                    </i-col>
                    <i-col :span="20">
                        <i-input v-model.trim="remark"></i-input>
                    </i-col>
                </Row>
            </div>
            <div style="width: 100%;position: absolute;bottom: 0;left: 0;border-top: 1px solid #e8e8e8;padding: 10px 16px;text-align: right;background: #fff;">
                <i-button style="margin-right: 8px" @click="drawerModal = false">取消</i-button>
                <i-button type="primary" @click="handleSubmit">确定</i-button>
            </div>
        </Drawer>
    </div>
    <script>
        vueInstanse = new Vue({
            el: "#accessplatformlist",
            i18n: utils.getI18n(),
            data: {
                loading: false,
                drawerModal: false,
                isEdit: false,
                queryParameter: '',
                taleHeight: 300,
                tableData: [],
                protocoltype: null,
                servername: '',
                uplinkversion: '1.0.0',
                userid: '', //用户名' ,
                password: '', //密码，限制8位长度' ,
                gnsscenterid: '', //下级平台接入码，上级平台给下级平台分配唯一标识码' ,
                uplinkip: '', //主链路ip' ,
                uplinkport: '', //主链路端口' ,
                downlinkip: '', //从链ip' ,
                downlinkport: '', //从链端口' ,
                m1: '', //密匙' ,
                ia1: '', //密匙' ,
                ic1: '', //密匙' ,
                realtimevideourl: '', //实时视频URL' ,
                historyvideourl: '', //视频回放URL' ,
                videokey: '', //视频key' ,
                remark: '', //备注' ,
                encryptflag: 1, //是否加密 ,
                columnsList: [{
                    title: vRoot.$t("bgMgr.action"),
                    key: 'action',
                    width: 200,
                    render: function(h, params) {
                        var status = params.row.status;
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: status == 0 ? 'primary' : 'error',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: function() {
                                        vueInstanse.setForwardParamsStatus(params.row);
                                    }
                                }
                            }, status == 0 ? "开启服务" : '关闭服务'),
                            h('Button', {
                                props: {
                                    type: 'info',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: function() {
                                        vueInstanse.upload809Index = params.index;
                                        editObject = params.row;
                                        vueInstanse.setRowInfo(editObject);
                                        vueInstanse.isEdit = true;
                                        vueInstanse.drawerModal = true;
                                    }
                                }
                            }, vRoot.$t("bgMgr.edit")),

                            h('Poptip', {
                                props: {
                                    confirm: true,
                                    title: vRoot.$t("message.confirmDel")
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    'on-ok': function() {
                                        vueInstanse.upload809Index = params.index;
                                        vueInstanse.deleteForwardParams(params.row.forwardid);
                                    }
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    }
                                }, vRoot.$t("bgMgr.delete"))
                            ]),
                        ]);
                    },
                }, {
                    title: '主链路状态',
                    width: 120,
                    render: function(h, params) {
                        var upstatus = params.row.upstatus;
                        var color = 'green';
                        var str = 'red';
                        switch (upstatus) {
                            case -1:
                                str = '断开';
                                break;
                            case 0:
                                str = '已连接';
                                color = 'green';
                                break;
                            case 1:
                                str = 'ip地址不正确';
                                break;
                            case 2:
                                str = '接入码不正确';
                                break;
                            case 3:
                                str = '用户没有注册';
                                break;
                            case 4:
                                str = '密码错误';
                                break;
                            case 5:
                                str = '资源紧张，稍候再连接';
                                break;
                            case 6:
                                str = '其他';
                                break;
                        }

                        return h('span', {
                            style: {
                                color: color
                            }
                        }, str)

                    }
                }, {
                    title: '从链路状态',
                    width: 120,
                    render: function(h, params) {
                        var downstatus = params.row.downstatus;
                        var color = 'green';
                        var str = 'red';
                        switch (downstatus) {
                            case -1:
                                str = '断开';
                                break;
                            case 0:
                                str = '已连接';
                                color = 'green';
                                break;
                            case 1:
                                str = 'ip地址不正确';
                                break;
                            case 2:
                                str = '接入码不正确';
                                break;
                            case 3:
                                str = '用户没有注册';
                                break;
                            case 4:
                                str = '密码错误';
                                break;
                            case 5:
                                str = '资源紧张，稍候再连接';
                                break;
                            case 6:
                                str = '其他';
                                break;
                        }

                        return h('span', {
                            style: {
                                color: color
                            }
                        }, str)
                    }
                }, {
                    title: '创建者',
                    key: 'creater',
                    width: 100,
                }, {
                    title: '平台名称',
                    key: 'servername',
                    width: 120,
                }, {
                    title: '用户名',
                    key: 'userid',
                    width: 120,
                }, {
                    title: '密码',
                    key: 'password',
                    width: 120,
                }, {
                    title: '下级平台接入',
                    key: 'gnsscenterid',
                    width: 120,
                }, {
                    title: '主链路ip',
                    key: 'uplinkip',
                    width: 140,
                }, {
                    title: '主链路端口',
                    key: 'uplinkport',
                    width: 120,
                }, {
                    title: '从链ip',
                    key: 'downlinkip',
                    width: 120,
                }, {
                    title: '从链端口',
                    key: 'downlinkport',
                    width: 120,
                }, {
                    title: 'M1密匙',
                    key: 'm1',
                    width: 120,
                }, {
                    title: 'IA1密匙',
                    key: 'ia1',
                    width: 120,
                }, {
                    title: 'IC1密匙',
                    key: 'ic1',
                    width: 120,
                }, {
                    title: '视频key',
                    key: 'videokey',
                    width: 120,
                }, {
                    title: '实时视频URL',
                    key: 'realtimevideourl',
                    width: 120,
                }, {
                    title: '视频回放URL',
                    key: 'historyvideourl',
                    width: 120,
                }, {
                    title: '备注',
                    key: 'remark',
                    width: 120,
                }],
                protocols: [],
                inputtype: 0,
            },
            methods: {
                cleanValue: function() {
                    this.queryParameter = '';
                },
                onChangeEncryptFlag: function(val) {
                    this.encryptflag = val ? 1 : 0;
                },
                handleSubmit: function() {
                    var url = '';
                    var me = this;
                    var data = {
                        protocoltype: Number(this.protocoltype),
                        inputtype: Number(this.inputtype),
                        servername: this.servername,
                        uplinkversion: this.uplinkversion,
                        userid: this.userid, //用户名' ,
                        password: this.password, //密码，限制8位长度' ,
                        gnsscenterid: Number(this.gnsscenterid), //下级平台接入码，上级平台给下级平台分配唯一标识码' ,
                        uplinkip: this.uplinkip, //主链路ip' ,
                        uplinkport: Number(this.uplinkport), //主链路端口' ,
                        downlinkip: this.downlinkip, //从链ip' ,
                        downlinkport: Number(this.downlinkport), //从链端口' ,

                        realtimevideourl: this.realtimevideourl, //实时视频URL' ,
                        historyvideourl: this.historyvideourl, //视频回放URL' ,
                        videokey: this.videokey, //视频key' ,
                        remark: this.remark, //备注' ,
                        encryptflag: this.encryptflag
                    }

                    if (this.inputtype != 3) {
                        if (
                            this.servername == "" ||
                            this.uplinkip == "") {
                            this.$Message.error('红点的参数是必填的');
                            return;
                        }
                    } else {
                        if (
                            this.servername == "" ||
                            this.gnsscenterid == "" ||
                            this.userid == "" ||
                            this.password == "" ||
                            this.uplinkip == "" ||
                            this.uplinkport == "") {
                            this.$Message.error('红点的参数是必填的');
                            return;
                        }
                    }

                    if (this.encryptflag == 1) {
                        if (
                            this.m1 == "" ||
                            this.ia1 == "" ||
                            this.ic1 == "") {
                            this.$Message.error('红点的参数是必填的');
                        }
                        data.m1 = Number(this.m1); //密匙' ,
                        data.ia1 = Number(this.ia1); //密匙' ,
                        data.ic1 = Number(this.ic1); //密匙' ,
                    }

                    if (this.isEdit) {
                        data.forwardid = editObject.forwardid;
                        url = myUrls.editForwardParam();
                    } else {
                        url = myUrls.createForwardParam();
                    }


                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            if (me.isEdit) {
                                me.$Message.success('编辑成功');
                                Object.assign(editObject, resp);
                            } else {
                                me.tableData.push(resp);
                                me.$Message.success('添加成功');
                            }
                            me.drawerModal = false;
                        } else {
                            if (me.isEdit) {
                                me.$Message.error('编辑失败');
                            } else {
                                me.$Message.error('添加失败');
                            }
                        }
                    })
                },
                setRowInfo: function(row) {
                    this.protocoltype = Number(row.protocoltype);
                    this.servername = row.servername;
                    this.uplinkversion = row.uplinkversion;
                    this.userid = row.userid; //用户名' ,
                    this.password = row.password; //密码，限制8位长度' ,
                    this.gnsscenterid = row.gnsscenterid; //下级平台接入码，上级平台给下级平台分配唯一标识码' ,
                    this.uplinkip = row.uplinkip; //主链路ip' ,
                    this.uplinkport = row.uplinkport; //主链路端口' ,
                    this.downlinkip = row.downlinkip; //从链ip' ,
                    this.downlinkport = row.downlinkport; //从链端口' ,
                    this.m1 = row.m1; //密匙' ,
                    this.ia1 = row.ia1; //密匙' ,
                    this.ic1 = row.ic1; //密匙' ,
                    this.realtimevideourl = row.realtimevideourl; //实时视频URL' ,
                    this.historyvideourl = row.historyvideourl; //视频回放URL' ,
                    this.videokey = row.videokey; //视频key' ,
                    this.remark = row.remark; //备注' ,
                    this.encryptflag = row.encryptflag; //备注' ,
                },
                handleAdd: function() {
                    this.setRowInfo({
                        protocoltype: this.protocoltype,
                        servername: '',
                        uplinkversion: '',
                        userid: '', //用户名' ,
                        password: '', //密码，限制8位长度' ,
                        gnsscenterid: '', //下级平台接入码，上级平台给下级平台分配唯一标识码' ,
                        uplinkip: '', //主链路ip' ,
                        uplinkport: '', //主链路端口' ,
                        downlinkip: '', //从链ip' ,
                        downlinkport: '', //从链端口' ,
                        m1: '', //密匙' ,
                        ia1: '', //密匙' ,
                        ic1: '', //密匙' ,
                        realtimevideourl: '', //实时视频URL' ,
                        historyvideourl: '', //视频回放URL' ,
                        videokey: '', //视频key' ,
                        remark: '', //备注' ,
                    })
                    this.drawerModal = true;
                    this.isEdit = false;
                },
                calcTableHeight: function() {
                    var wHeight = window.innerHeight;
                    if (wHeight < 760) {
                        wHeight = 760;
                    }
                    this.taleHeight = wHeight - 148;
                },
                queryForwardParams: function() {
                    var me = this;
                    var url = myUrls.queryForwardParams();
                    utils.sendAjax(url, {
                        creater: userName,
                        keyword: this.queryParameter,
                    }, function(resp) {
                        me.tableData = resp.forwards;
                    });
                },
                queryForwardProtocols: function() {
                    var me = this;
                    var url = myUrls.queryForwardProtocols();
                    utils.sendAjax(url, {}, function(resp) {
                        me.protocols = resp.protocols;
                        me.protocoltype = 1;
                    });
                },
                setForwardParamsStatus: function(row) {
                    var me = this;
                    var url = myUrls.setForwardParamsStatus();
                    var data = {
                        status: row.status == 0 ? 1 : 0,
                        forwards: [row.forwardid]
                    };
                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status === 0) {
                            row.status = row.status == 0 ? 1 : 0;
                        } else {
                            me.$Message.error("操作失败");
                        }
                    });
                },
                deleteForwardParams: function(uploadid) {
                    var me = this;
                    var url = myUrls.deleteForwardParams();
                    var data = {
                        forwards: [uploadid]
                    };
                    utils.sendAjax(url, data, function(resp) {
                        console.log(resp);
                        if (resp.status == 0) {
                            me.$delete(me.tableData, me.upload809Index);
                            me.$Message.success('删除成功');
                        } else {
                            me.$Message.error('删除失败');
                        }
                    })
                }
            },
            watch: {
                protocoltype: function(protocoltype) {
                    var inputtype = 0;
                    for (var i = 0; i < this.protocols.length; i++) {
                        var item = this.protocols[i];
                        if (item.index === protocoltype) {
                            inputtype = item.inputtype;
                        }
                    };
                    this.inputtype = inputtype;
                }
            },
            computed: {
                drawerTitle: function() {
                    return this.isEdit ? '编辑接入平台' : '新增接入平台';
                },

            },
            mounted: function() {
                var me = this;
                this.calcTableHeight();
                this.queryForwardParams();
                this.queryForwardProtocols();
                window.onresize = function() {
                    me.calcTableHeight();
                }
            }
        })
    </script>
</div>